<template>
  <el-dialog v-model="props.dialogVisible" width="850" @close="handleClose" class="pdf-dom" ref="fileArea">
    <el-descriptions class="margin-top margin-bottom" title="人员基础信息表" :column="2" border>
      <template #extra>
        <el-button type="primary" @click="handlePrint()" v-if="isDown">打印</el-button>
        <el-button type="primary" @click="downloadPdf2()" v-if="isDown">导出</el-button>
      </template>
    </el-descriptions>
    <div class="list-title border-top">基础信息</div>
    <el-descriptions :column="2" border>
      
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="调出收费站"> {{props.rowDetails.deptName}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="调入收费站"> {{props.rowDetails.transferDeptName}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="经办人"> {{props.rowDetails.flowList &&props.rowDetails.flowList[1].startUserName}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="经办日期"> {{props.rowDetails.flowList &&props.rowDetails.flowList[1].finishTime}} </el-descriptions-item>
    </el-descriptions>
    <div class="list-title">人员信息</div>
    <el-descriptions :column="2" border>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="姓名"> {{props.rowDetails.userName}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="民族"> {{props.rowDetails.nation}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="部门"> {{props.rowDetails.deptName}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="现住址"> {{props.rowDetails.address}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="联系方式"> {{props.rowDetails.phonenumber}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="籍贯"> {{props.rowDetails.nativePlace}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="政治面貌" :span="2"> {{props.rowDetails.politicalStatus}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="最高学历毕业院校及专业" :span="2"> {{props.rowDetails.highestDegree}}
      </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="出生年月" :span="2">{{props.rowDetails.dateOfBirth}} </el-descriptions-item>
      <el-descriptions-item width="100px" label-class-name="labelWhite" label="岗位" :span="2">{{props.rowDetails.postName}}</el-descriptions-item> -->

    </el-descriptions>
    <div class="list-title">审批意见</div>
    <el-descriptions :column="2" border>
      <el-descriptions-item width="200px" label-class-name="labelWhite" label="部门负责人意见" :span="2">
        <div class="flex-between">
          <div>{{props.rowDetails.flowList &&props.rowDetails.flowList[0].commentList[0].content}} 
          </div>
          <div class="text-right">
            <div>{{props.rowDetails.flowList &&props.rowDetails.flowList[0].assigneeName}}
            </div>
            <div>
              {{props.rowDetails.flowList &&props.rowDetails.flowList[0].finishTime}}
            </div>
          </div>
        </div>
        
         </el-descriptions-item>

    </el-descriptions>

    <div class="padding" v-if="props.dialogApproval">
      <slot name="footer"></slot>
    </div>

  </el-dialog>
</template>
  
<script setup>
import { htmlToPdf } from '@/utils/htmlToPdf';
import { defineProps } from "vue";
const emit = defineEmits(["handleClose"]);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  rowDetails: {
    type: Object,
  },
  dialogApproval: {
    type: Boolean,
  }
});
const isDown = ref(true)
const fileArea = ref();
const list = ref([])






const downloadPdf2 = () => {
  isDown.value = false
  htmlToPdf('pdf-dom', '人员基础信息表');

  setTimeout(() => {
    isDown.value = true
  }, 2000);
}

const handleClose = () => {
  emit("handleClose");
}


const handlePrint = () => {
  // 使用Element UI的print方法打印表格
  isDown.value = false
  setTimeout(() => {
    window.print();
  }, 0);
}
onMounted(() => {
  const mediaQueryList = window.matchMedia('print');
  mediaQueryList.addListener((mediaQueryListEvent) => {
    if (!mediaQueryListEvent.matches) {
      isDown.value = true
    }
  });
})
</script>
  
  <style>
.content-cus .el-descriptions__cell {
  border: none !important;
}
.border-top {
  border-top: 1px solid #ebeef5;
}
.padding-none {
  padding: 0 !important;
}
.coumn-cus {
  padding: 8px 11px;
  min-height: 43px;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.text-right {
  text-align: right;
}

.my-label {
  background: #fff !important;
}

.list-title {
  border-right: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.list-title.border-top {
  border-top: 1px solid #ebeef5;
}
.flex {
  display: flex;
  align-items: center;
}
.flex .flex-sub {
  flex: 1;
  line-height: 40px;

  text-align: center;
}
.flex .flex-sub:first-child {
  border: none;
}
.flex .flex-sub > div {
  border: 1px solid #ebeef5;
  border-top: none;
  border-right: none;
}
.flex .flex-sub > div:last-child {
  border-bottom: none;
}
.ul {
  width: 100%;
  height: 126px;
}
.list-text {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ebeef5;
  padding: 0 10px;
}
.list-text:nth-child(2) {
  height: 45px;
  line-height: 45px;
}
.list-text:last-child {
  border-bottom: none;
}

.labelWhite {
  background: #fff !important;
}
.padding {
  padding: 20px 20px 40px 0;
  border-right: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.margin-bottom {
  margin-bottom: 15px;
}
.el-descriptions__title {
  padding-left: 112px;
}
</style>
  